<!--
 * @Author: huangwenqian
 * @Date: 2022-07-04 14:04:31
 * @LastEditors: huangwenqian
 * @Description: file content
-->
<template>
  <a-transfer
    v-model:target-keys="targetKeys1"
    v-model:selected-keys="selectedKeys1"
    :data-source="dataSource"
    :titles="titles"
    :render="render"
    :footer="footer"
    :row-key="rowKey"
    :disabled="disabled"
    :filter-option="filterOption"
    :list-style="listStyle"
    :locale="locale"
    :one-way="oneWay"
    :operations="operations"
    :operation-style="operationStyle"
    :pagination="pagination"
    :show-search="showSearch"
    :show-select-all="showSelectAll"
    @change="change"
    @selectChange="selectChange"
    @search="search"
    @scroll="scroll"
  >
    <template v-if="$slots.render" #render="value">
      <slot name="render" v-bind="{...value}" />
    </template>
    <template v-if="$slots.footer" #footer="value">
      <slot name="footer" v-bind="{...value}" />
    </template>
    <template v-if="$slots.children" #children="value">
      <slot name="children" v-bind="{...value}" />
    </template>
    <template v-if="$slots.notFoundContent" #notFoundContent>
      <slot name="notFoundContent" />
    </template>
  </a-transfer>
</template>

<script>
import { defineComponent } from 'vue'
import { Transfer } from 'ant-design-vue'
export default defineComponent({
  name: 'ZTransfer',
  components: { aTransfer: Transfer },
  props: {
    titles: {
      type: Array,
      default: () => ['', '']
    },
    targetKeys: {
      type: Array,
      default: undefined
    },
    selectedKeys: {
      type: Array,
      default: undefined
    },
    dataSource: {
      type: Array,
      default: undefined
    },
    render: {
      type: Function,
      default: undefined
    },
    footer: {
      type: Function,
      default: undefined
    },
    rowKey: {
      type: Function,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    filterOption: {
      type: Function,
      default: undefined
    },
    listStyle: {
      type: Object,
      default: undefined
    },
    locale: {
      type: Object,
      default: undefined
    },
    oneWay: {
      type: Boolean,
      default: false
    },
    operations: {
      type: Array,
      default: undefined
    },
    operationStyle: {
      type: Object,
      default: undefined
    },
    pagination: {
      type: Boolean,
      default: false
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    showSelectAll: {
      type: Boolean,
      default: true
    }
  },
  emits: {
    'change': null,
    'selectChange': null,
    'search': null,
    'scroll': null,
    'update:selectedKeys': null,
    'update:targetKeys': null
  },
  computed: {
    selectedKeys1: {
      get() {
        return this.selectedKeys
      },
      set(val) {
        this.$emit('update:selectedKeys', val)
      }
    },
    targetKeys1: {
      get() {
        return this.targetKeys
      },
      set(val) {
        this.$emit('update:targetKeys', val)
      }
    }
  },
  methods: {
    change(targetKeys, direction, moveKeys) {
      this.$emit('change', targetKeys, direction, moveKeys)
    },
    selectChange(leftkeys, rightKeys) {
      this.$emit('selectChange', leftkeys, rightKeys)
    },
    search(direction, value) {
      this.$emit('search', direction, value)
    },
    scroll(direction, event) {
      this.$emit('scroll', direction, event)
    }
  }
})
</script>
